<template>
  <div id="likeGoodsView">
    <div class="caption">
      <span class="text">猜你喜欢</span>
    </div>
  </div>
  <goods-info-cart :data="data" :span="props.span" />
</template>
<script lang="ts" setup>
import GoodsInfoCart from "@/components/GoodsInfoCart.vue";
import { GoodsControllerService, GoodsEsDto } from "@/api";
import { defineProps, ref, watch } from "vue";
import { useScroll } from "@/store/useScroll";

const props = defineProps({
  span: {
    type: Number,
    default: 4,
  },
});
// 结束标识
const stopFlag = ref(false);
//获取触底数据
const { pageNum, stop } = useScroll();

const data = ref<GoodsEsDto[]>([]);
watch(
  () => pageNum.value,
  () => {
    if (stopFlag.value) return;
    //请求数据
    GoodsControllerService.getListWithEsUsingGet(pageNum.value, 10).then(
      (res) => {
        data.value.push(...res.data);
        if (res.data?.length < 10) {
          stopFlag.value = true;
          stop(stopFlag.value);
        }
      }
    );
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
#likeGoodsView {
  .caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 36px 0 20px;
    font-size: 24px;
    color: #262626;

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 28px 0 30px;

      &::before,
      &::after {
        content: "";
        width: 10px;
        height: 10px;
        //background-image: url(~@/assets/bubble.png);

        background-color: #409eff;
        border-radius: 50%;
        display: inline-block;

        background-size: contain;
        margin: 0 10px;
      }
    }
  }
}
</style>
